* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --size: 100;
  --unit: calc((var(--size) / 1095) * 1vmin);
  --shadow: rgb(150, 107, 95);
  --db: hsl(15, 34%, 23%);
  --mb: hsl(22, 22%, 33%);
  --lb: hsl(25, 22%, 47%);
  --dp: hsl(24, 26%, 61%);
  --mp: hsl(25, 58%, 78%);
  --lp: hsl(17, 81%, 85%);
  --h: hsl(22, 64%, 85%);
  --rosy: rgb(247, 197, 205);
  --b: #25547f;
  --blur: blur(calc(1 * var(--unit)));
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(14, 14, 14);
}

.girl {
  width: calc(935 * var(--unit));
  height: calc(1095 * var(--unit));
  position: fixed;
  top: 0;
  z-index: 1;
  overflow: hidden;
  * {
    position: absolute;
  }
  .side-shadow {
    width: 25%;
    height: 40%;
    background-color: rgba(0, 0, 0, 0.212);
    transform: rotate(30deg);
    right: 30%;
    top: 25%;
    z-index: 24;
    filter: blur(calc(20 * var(--unit)));
  }
  .earring {
    filter: var(--blur);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.548) 100%
      ),
      radial-gradient(
        circle at 50% 0%,
        rgba(0, 0, 0, 0.164) 70%,
        rgba(255, 255, 255, 0.212) 90%
      ),
      radial-gradient(
        circle at 10% 40%,
        rgb(202, 193, 193) 5%,
        rgba(0, 0, 0, 0.521) 30%,
        rgba(41, 41, 41, 0.822) 60%
      ),
      linear-gradient(
        0deg,
        rgb(255, 255, 255) 10%,
        rgb(187, 179, 179) 40%,
        rgb(77, 77, 77) 100%
      );
    border-radius: 50%;
    width: 5%;
    height: 4.5%;
    bottom: 43.5%;
    right: 34.5%;
  }
  .collar {
    filter: var(--blur);
    width: 35%;
    height: 30%;
    background: linear-gradient(
      90deg,
      rgb(218, 215, 193) 80%,
      rgb(99, 98, 89) 100%
    );
    box-shadow: inset 0 calc(2 * var(--unit)) calc(10 * var(--unit))
      rgba(99, 98, 89);
    left: 41%;
    bottom: 13.5%;
    border-radius: 83% 5% 0 0;
    z-index: -1;
    &::before {
      content: "";
      position: absolute;
      width: 108%;
      height: 100%;
      border-radius: 90% 0 0 0;
      background-color: rgb(70, 65, 41);
      background: linear-gradient(
        90deg,
        rgb(68, 63, 37) 0%,
        rgb(145, 116, 62) 20%,
        rgb(145, 116, 62) 30%,
        rgb(70, 55, 32) 50%,
        rgb(22, 16, 7) 80%,
        rgb(10, 7, 3) 100%
      );
      top: 10%;
      left: -8%;
      box-shadow: inset calc(40 * var(--unit)) calc(-30 * var(--unit))
        calc(20 * var(--unit)) rgba(51, 42, 20, 0.637);
    }
  }
  .jacket {
    filter: blur(calc(2 * var(--unit)));
    width: 50%;
    height: 40%;
    background: linear-gradient(
      62deg,
      rgb(145, 116, 62) 40%,
      rgb(70, 55, 32) 55%,
      rgb(26, 20, 11) 70%,
      rgb(22, 16, 7) 80%,
      rgb(10, 7, 3) 100%
    );
    left: 35%;
    bottom: -15%;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    transform: rotate(20deg);
    z-index: 20;
    box-shadow: inset calc(10 * var(--unit)) calc(-9 * var(--unit))
        calc(15 * var(--unit)) rgb(59, 52, 32),
      inset calc(25 * var(--unit)) calc(-20 * var(--unit))
        calc(18 * var(--unit)) calc(5 * var(--unit)) rgba(68, 57, 28, 0.637);
    &::after {
      content: "";
      position: absolute;
      width: 15%;
      height: 60%;
      bottom: 0;
      left: 20%;
      border-radius: 40% / 50%;
      background: linear-gradient(
        260deg,
        rgb(104, 81, 47) 0%,
        rgb(70, 57, 32) 50%
      );
      transform: rotate(-20deg);
      filter: blur(calc(8 * var(--unit)));
      box-shadow: calc(-30 * var(--unit)) calc(40 * var(--unit))
          calc(20 * var(--unit)) rgba(73, 58, 35, 0.89),
        calc(80 * var(--unit)) calc(-50 * var(--unit)) calc(25 * var(--unit))
          calc(5 * var(--unit)) rgb(77, 61, 38),
        calc(150 * var(--unit)) calc(-10 * var(--unit)) calc(30 * var(--unit))
          calc(15 * var(--unit)) rgb(27, 22, 15),
        calc(200 * var(--unit)) calc(30 * var(--unit)) calc(20 * var(--unit))
          calc(35 * var(--unit)) rgb(29, 23, 16);
    }
  }
  .band {
    width: 42%;
    height: 30%;
    filter: var(--blur);
    background: linear-gradient(
        110deg,
        rgba(188, 208, 231, 0.5) 20%,
        rgba(86, 117, 155, 0.5) 40%,
        rgba(30, 58, 85, 0.9) 53%,
        #0b1b2b 70%,
        rgba(0, 0, 0, 1) 100%
      ),
      radial-gradient(
        ellipse at 0% 100%,
        rgb(96, 133, 168) 50%,
        rgb(15, 21, 27) 80%
      );
    top: 18%;
    left: 33%;
    overflow: hidden;
    border-radius: 70% 100% 50% 0 / 80% 100% 50% 0;
    &::after {
      content: "";
      position: absolute;
      width: 50%;
      height: 40%;
      background-color: rgba(30, 58, 85, 0.9);
      top: 39%;
      left: -6%;
      border-radius: 100% / 100%;
      transform: rotate(32deg);
      filter: blur(calc(5 * var(--unit)));
    }
  }
  .top-band {
    width: 27%;
    height: 5%;
    background: linear-gradient(
      68deg,
      rgb(99, 130, 168) 0%,
      rgb(21, 47, 71) 50%,
      #0b1b2b 80%,
      rgba(0, 0, 0, 1) 100%
    );
    z-index: 20;
    transform: rotate(45deg);
    top: 36%;
    right: 27%;
    filter: blur(calc(2 * var(--unit)));
    box-shadow: calc(1 * var(--unit)) calc(2 * var(--unit))
        calc(1 * var(--unit)) var(--db),
      0 calc(3 * var(--unit)) calc(1 * var(--unit)) rgb(53, 33, 33);
  }
  .top-yellow-band {
    width: 26%;
    height: 20%;
    top: 11%;
    left: 51%;
    background: rgb(116, 105, 74);
    border-radius: 70% 100% 20% 0 / 70% 100% 20% 0;
    transform: rotate(-30deg);
    z-index: -20;
    overflow: hidden;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 80%;
      height: 80%;
      right: 0;
      border-radius: inherit;
    }
    &::before {
      bottom: 15%;
      background: linear-gradient(
        80deg,
        rgb(41, 37, 26) 30%,
        rgb(212, 190, 130) 80%,
        rgb(41, 37, 26) 90%,
        rgba(0, 0, 0, 1) 100%
      );
      box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit))
        rgb(77, 71, 47);
    }
    &::after {
      bottom: -10%;
      background: linear-gradient(
        80deg,
        rgb(41, 37, 26) 60%,
        rgb(228, 205, 141) 70%,
        rgb(41, 37, 26) 90%,
        rgba(0, 0, 0, 1) 100%
      );
      box-shadow: inset 0 calc(3 * var(--unit)) calc(1 * var(--unit))
        rgb(77, 71, 47);
    }
  }
  .yellow-band {
    width: 30%;
    height: 18%;
    filter: var(--blur);
    background-color: rgb(228, 205, 141);
    background: linear-gradient(
        110deg,
        rgba(228, 205, 141, 0.8) 20%,
        rgba(129, 116, 79, 0.8) 65%,
        rgba(41, 37, 26, 0.5) 80%,
        rgba(0, 0, 0, 1) 100%
      ),
      radial-gradient(
        circle at bottom center,
        rgba(253, 233, 176, 0.8),
        rgba(185, 171, 131, 0.8) 60%,
        rgba(34, 30, 20, 0.8) 100%
      );
    left: 45%;
    top: 15%;
    z-index: -1;
    border-radius: 80% 100% 20% 0% / 80% 100% 20% 0%;
    box-shadow: inset calc(-3 * var(--unit)) calc(3 * var(--unit))
      calc(5 * var(--unit)) rgba(41, 37, 26, 0.5);
    overflow: hidden;
    .shadow {
      width: 105%;
      height: 80%;
      border-radius: inherit;
      background: linear-gradient(
        110deg,
        rgba(228, 205, 141, 0.8) 20%,
        rgba(129, 116, 79, 0.8) 65%,
        rgba(41, 37, 26, 0.5) 80%
      );
      box-shadow: inset calc(-15 * var(--unit)) calc(5 * var(--unit))
          calc(5 * var(--unit)) rgb(53, 48, 33),
        calc(80 * var(--unit)) 0 calc(10 * var(--unit)) rgb(51, 46, 32),
        calc(60 * var(--unit)) calc(-10 * var(--unit)) calc(10 * var(--unit))
          rgb(90, 81, 57);
      top: 15%;
      left: -5%;
      transform: rotate(10deg);
    }
  }
  .yellow-drape {
    width: 10%;
    height: 61%;
    filter: var(--blur);
    background: linear-gradient(
      85deg,
      rgb(129, 116, 79) 0%,
      rgb(228, 205, 141) 40%,
      rgb(65, 58, 41) 60%
    );
    right: 15%;
    top: 20%;
    z-index: 30;
    border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
    transform: rotate(-3deg);
    box-shadow: inset calc(4 * var(--unit)) calc(2 * var(--unit))
        calc(10 * var(--unit)) rgb(39, 35, 24),
      inset calc(-4 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit))
        rgb(39, 35, 24),
      calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit))
        rgb(39, 35, 24),
      calc(6 * var(--unit)) calc(0 * var(--unit)) calc(10 * var(--unit))
        rgba(39, 34, 21, 0.877);
    overflow: hidden;
    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: -10;
    }
    &::before {
      filter: var(--blur);
      background: linear-gradient(
        100deg,
        rgba(14, 18, 22, 0.856) 0%,
        // rgba(139, 170, 206, 0.6) 20%,
        rgba(73, 93, 131, 0.8) 40%,
        // rgba(139, 170, 206, 0.6) 60%,
        rgba(41, 52, 65, 0.5) 80%
      );
      width: 110%;
      height: 18%;
      bottom: -2%;
      transform: rotate(-10deg);
    }
    &::after {
      filter: blur(calc(10 * var(--unit)));
      width: 10%;
      height: 50%;
      bottom: 60%;
      left: 30%;
      transform: rotate(-5deg);
      background-color: rgb(46, 38, 13);
      box-shadow: calc(-4 * var(--unit)) calc(150 * var(--unit))
        calc(1 * var(--unit)) rgb(46, 38, 13);
    }
  }
  .yellow-drape-back {
    filter: var(--blur);
    width: 10%;
    height: 55%;
    z-index: -10;
    background: linear-gradient(
      85deg,
      rgb(129, 116, 79) 0%,
      rgb(73, 93, 131) 40%,
      rgb(31, 38, 46) 60%,
      rgb(0, 0, 0) 100%
    );
    right: 10%;
    top: 20%;
    border-radius: 10% 100% 20% 20% / 5% 100% 15% 15%;
    transform: rotate(-10deg);
    box-shadow: inset calc(2 * var(--unit)) calc(2 * var(--unit))
        calc(10 * var(--unit)) rgb(39, 35, 24),
      inset calc(-2 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit))
        rgb(22, 20, 13),
      calc(-4 * var(--unit)) calc(-4 * var(--unit)) calc(10 * var(--unit))
        rgb(39, 35, 24);
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      background: linear-gradient(
        100deg,
        rgba(139, 170, 206, 0.8) 0%,
        rgba(73, 93, 131, 0.8) 40%
      );
      width: 110%;
      height: 15%;
      z-index: -10;
      bottom: 0;
      transform: rotate(-10deg);
    }
  }
  .neck {
    background: linear-gradient(
      70deg,
      var(--mp) 10%,
      rgb(131, 95, 81) 30%,
      rgb(82, 57, 47) 50%,
      rgb(31, 21, 18) 100%
    );
    filter: blur(calc(2 * var(--unit)));
    width: 20%;
    height: 20%;
    // z-index: 30;
    left: 48%;
    top: 50%;
    z-index: -1;
    transform: rotate(-28deg);
  }
  .side-blur {
    background: var(--db);
    filter: blur(calc(20 * var(--unit)));
    width: 9%;
    height: 13%;
    left: 55%;
    top: 40%;
    z-index: 20;
    border-radius: 20%;
    transform: rotate(20deg);
  }
  .blob {
    &:nth-child(2) {
      background-color: var(--lp);
      filter: blur(calc(15 * var(--unit)));
      width: 9%;
      height: 11%;
      left: 42%;
      top: 40%;
      border-radius: 20%;
      z-index: 2;
      transform: rotate(20deg);
    }
    &:nth-child(3) {
      background-color: var(--h);
      filter: blur(calc(10 * var(--unit)));
      width: 10%;
      height: 6%;
      left: 35%;
      top: 30%;
      z-index: 2;
      border-radius: 50%;
      transform: rotate(20deg);
    }
    &:nth-child(4) {
      background: linear-gradient(90deg, rgb(31, 44, 63) 20%, black);
      width: 22%;
      height: 18.5%;
      left: 56%;
      top: 26%;
      z-index: 21;
      border-radius: 0 50% 0 0;
      transform: rotate(40deg);
      filter: blur(calc(10 * var(--unit)));
      &::after {
        content: "";
        position: absolute;
        width: 40%;
        height: 35%;
        background: linear-gradient(
          90deg,
          rgba(30, 58, 85, 0.9),
          rgb(31, 44, 63)
        );
        filter: blur(calc(2 * var(--unit)));
        left: -40%;
        bottom: 3%;
        border-radius: 100% 0 0 0 /100% 0 0 0;
      }
    }
  }
  .ear {
    width: 9%;
    height: 5.7%;
    background: linear-gradient(170deg, rgb(150, 109, 96) 50%, rgb(66, 47, 41));
    right: 32%;
    top: 44%;
    z-index: 15;
    transform: rotate(-43deg);
    border-radius: 32%;
    box-shadow: 0 calc(2 * var(--unit)) rgb(87, 66, 57);
    &::before,
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }
    &::before {
      width: 60%;
      height: 30%;
      left: 20%;
      top: 20%;
      background-color: rgb(82, 56, 45);
      filter: blur(calc(2 * var(--unit)));
    }
    &::after {
      background-color: rgb(150, 109, 96);
      width: 80%;
      height: 40%;
      left: 0;
      top: 0;
      transform: rotate(-20deg);
    }
  }
  .face {
    width: 35%;
    height: 32%;
    border-radius: 30%;
    left: 30%;
    top: 29%;
    overflow: hidden;
    .temple {
      width: 25%;
      height: 20%;
      background: linear-gradient(
        90deg,
        var(--mp) 0%,
        rgba(185, 144, 132, 0.6) 30%,
        rgba(150, 109, 96, 0.5) 40%
      );
      z-index: 3;
      right: 17%;
      top: 16%;
      transform: rotate(30deg);
    }
    .chin-blur {
      width: 9%;
      height: 15%;
      background-color: rgba(163, 121, 105, 0.836);
      border-radius: 30%;
      transform: rotate(-40deg);
      left: 32%;
      bottom: 5%;
      z-index: 10;
      filter: blur(calc(4 * var(--unit)));
      &::after {
        content: "";
        position: absolute;
        width: 150%;
        height: 50%;
        bottom: 0;
        left: -70%;
        background: radial-gradient(
          circle at -10% 0%,
          var(--mp) 0%,
          rgba(163, 121, 105, 0.836) 50%
        );
        transform: rotate(30deg);
      }
    }
    .f1 {
      background: var(--lp);
      background: linear-gradient(10deg, var(--lp) 0%, var(--mp) 100%);
      width: 60%;
      height: 36%;
      left: 5%;
      top: 5%;
      border-radius: 70% 80% 100% 50% / 100% 90% 100% 100%;
      transform: rotate(28deg);
      filter: var(--blur);
      box-shadow: inset 0 calc(2 * var(--unit)) calc(8 * var(--unit)) var(--db),
        inset calc(1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit))
          var(--db);
    }
    .f2 {
      background: var(--mp);
      filter: var(--blur);
      z-index: -1;
      width: 85%;
      height: 58%;
      left: 5%;
      top: 14%;
      border-radius: 30% 100% 100% 50% / 20% 100% 100% 100%;
      transform: rotate(30deg);
    }
    .left-cheek {
      background: var(--lp);
      background: linear-gradient(
        0deg,
        var(--lp) 0%,
        var(--h) 15%,
        var(--mp) 70%
      );
      filter: var(--blur);
      width: 80%;
      height: 40%;
      left: -13%;
      top: 36%;
      border-radius: 100% 0% 80% 100%;
      transform: rotate(75deg);
    }
    .f4 {
      background: var(--mp);
      background: radial-gradient(
        circle at 0% 50%,
        var(--lp) 35%,
        rgb(158, 104, 87) 100%
      );
      width: 39%;
      height: 30%;
      left: 13%;
      top: 68%;
      border-radius: 30% 0% 50% 45% / 30% 0% 50% 58%;
      transform: rotate(25deg);
      filter: var(--blur);
    }
    .right-cheek {
      background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
      width: 45%;
      height: 50%;
      left: 47%;
      top: 30%;
      border-radius: 0% 50%;
      transform: rotate(42deg);
      filter: var(--blur);

      &::after {
        content: "";
        position: absolute;
        width: 150%;
        height: 50%;
        background: rgba(112, 71, 58, 1);
        background: linear-gradient(
          115deg,
          rgb(189, 145, 130) 0%,
          var(--shadow) 40%
        );
        bottom: -10%;
        transform: rotate(-80deg);
        border-radius: 80% 0% 40% 60% / 50%;
      }
      .blob:nth-child(1) {
        background: linear-gradient(75deg, var(--mp) 10%, var(--shadow) 50%);
        -webkit-filter: blur(calc(5 * var(--unit)));
        filter: blur(calc(5 * var(--unit)));
        width: 89%;
        height: 156%;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-3deg);
        left: 2%;
        top: -5%;
        z-index: 2;
        border-radius: 5% 89% 67% 10%;
      }
    }
    .lips {
      width: 50%;
      height: 30%;
      border: solid calc(3 * var(--unit)) transparent;
      left: 10%;
      bottom: 5%;
      z-index: 5;
      filter: var(--blur);
      .top-lip {
        width: 52%;
        height: 20%;
        filter: var(--blur);
        background: linear-gradient(
          3deg,
          #9b372a 20%,
          #a54033 30%,
          transparent 55%
        );
        transform: rotate(15deg);
        top: 11%;
        left: 5%;
        border-radius: 100% 100% 20% 20% / 100%;
        box-shadow: 0 calc(1 * var(--unit)) rgb(87, 14, 14);
        &::before,
        &::after {
          content: "";
          position: absolute;
        }
        &::before {
          width: 72%;
          height: 50%;
          left: 20%;
          top: 36%;
          background: linear-gradient(20deg, #a55045 10%, transparent 50%);
          border-radius: 30%;
          transform: rotate(4deg);
          box-shadow: calc(-3 * var(--unit)) calc(3 * var(--unit)) #a75449;
        }
        &::after {
          width: 14%;
          height: 60%;
          left: 2%;
          top: 38%;
          background: linear-gradient(
            0deg,
            #7c3930 0%,
            #a75449 50%,
            transparent 100%
          );
          filter: var(--blur);
          border-radius: 50% 50% 50% 10%;
        }
      }
      .teeth {
        width: 28%;
        height: 16%;
        background: rgb(219, 188, 148);
        background: linear-gradient(
          190deg,
          rgb(201, 168, 125) 65%,
          rgb(155, 68, 57) 75%,
          rgb(44, 19, 15) 100%
        );
        top: 24%;
        left: 18%;
        border-radius: 0% 100% 0% 50% / 0% 100% 0% 100%;
        z-index: 2;
        overflow: hidden;
        box-shadow: calc(-4 * var(--unit)) calc(1 * var(--unit))
            calc(-2 * var(--unit)) calc(1 * var(--unit)) rgba(100, 32, 23, 0.5),
          calc(-2 * var(--unit)) calc(1 * var(--unit)) calc(3 * var(--unit))
            calc(1 * var(--unit)) rgb(116, 53, 44),
          calc(-6 * var(--unit)) calc(1 * var(--unit)) calc(3 * var(--unit))
            calc(2 * var(--unit)) rgb(133, 51, 40),
          calc(-7 * var(--unit)) calc(6 * var(--unit)) calc(3 * var(--unit))
            calc(1 * var(--unit)) hsla(7, 82%, 36%, 0.5),
          calc(2 * var(--unit)) 0 calc(1 * var(--unit)) calc(1 * var(--unit))
            hsla(7, 72%, 28%, 0.5),
          calc(2 * var(--unit)) calc(2 * var(--unit)) calc(3 * var(--unit))
            calc(3 * var(--unit)) hsla(7, 98%, 22%, 0.5);
        .teeth-right {
          width: 50%;
          height: 100%;
          right: 0%;
          background: red;
          background: linear-gradient(
            100deg,
            rgb(102, 52, 44) 0%,
            rgb(230, 203, 169) 45%,
            rgb(155, 68, 57) 65%,
            rgb(102, 52, 44) 80%
          );
          &::after {
            content: "";
            position: absolute;
            width: 55%;
            right: 30%;
            height: 100%;
            background: rgb(192, 168, 135);
            border-radius: 0% 0% 50% 30%;
            box-shadow: inset calc(0.5 * var(--unit)) calc(-0.5 * var(--unit))
                rgb(141, 124, 95),
              inset calc(-0.5 * var(--unit)) calc(-0.5 * var(--unit))
                rgb(172, 151, 114);
          }
        }

        &::before {
          content: "";
          position: absolute;
          width: 35%;
          height: 100%;
          background: black;
          background: radial-gradient(
            circle at 80% 0%,
            rgb(104, 74, 49) 0%,
            rgb(204, 181, 152) 45%,
            rgb(155, 68, 57) 65%,
            rgb(102, 52, 44) 80%
          );
          top: 0%;
          border-radius: 30%;
          box-shadow: inset calc(2 * var(--unit)) calc(1 * var(--unit))
            rgb(61, 18, 18);
        }
        &::after {
          content: "";
          position: absolute;
          width: 28%;
          height: 85%;
          background: rgb(194, 174, 149);
          left: 30%;
          top: 0%;
          border-radius: 0% 0% 50% 30%;
          box-shadow: inset calc(0.5 * var(--unit)) calc(-0.5 * var(--unit))
              rgb(184, 165, 132),
            inset calc(-0.5 * var(--unit)) calc(-0.5 * var(--unit))
              rgb(172, 151, 114);
        }
      }
      .bottom-lip {
        width: 42%;
        height: 40%;
        background: radial-gradient(
          60% 60% at 35% 20%,
          rgb(161, 71, 65) 50%,
          rgb(153, 59, 55) 70%,
          rgb(163, 80, 74) 100%
        );
        top: 25%;
        left: 8%;
        border-radius: 30% 30% 80% 70%/ 30% 30% 100% 100%;
        transform: rotate(12deg);
        overflow: hidden;
        box-shadow: calc(2 * var(--unit)) calc(1 * var(--unit))
            calc(4 * var(--unit)) calc(2 * var(--unit)) hsla(25, 22%, 54%, 0.5),
          calc(4 * var(--unit)) calc(1 * var(--unit)) calc(4 * var(--unit))
            calc(2 * var(--unit)) hsla(25, 22%, 54%, 0.5),
          calc(10 * var(--unit)) calc(5 * var(--unit)) calc(6 * var(--unit))
            calc(3 * var(--unit)) hsla(25, 22%, 54%, 0.4);

        .lip-highlight {
          width: 55%;
          height: 45%;
          left: 2%;
          border-radius: 30% 10%;
          filter: var(--blur);
          top: 57%;
          background: rgba(226, 187, 187, 0.356);

          &::after {
            content: "";
            position: absolute;
            right: 5%;
            top: -10%;
            width: 15%;
            height: 60%;
            border-radius: 50%;
            background: rgba(238, 231, 231, 0.781);
            filter: blur(calc(2 * var(--unit)));
            box-shadow: calc(-10 * var(--unit)) calc(1 * var(--unit))
              calc(1 * var(--unit)) calc(3 * var(--unit)) rgb(212, 158, 158);
          }

          &::before {
            content: "";
            position: absolute;
            left: 30%;
            top: 5%;
            width: 20%;
            height: 50%;
            border-radius: 50%;
            background: rgba(243, 231, 231, 0.788);
            filter: blur(calc(2 * var(--unit)));
          }
        }
      }
    }
    .noseblob {
      width: 22%;
      height: 15%;
      background: linear-gradient(
        -60deg,
        rgba(240, 204, 178, 0.8) 40%,
        var(--lb) 70%
      );
      left: 31%;
      top: 21%;
      z-index: 1;
      filter: blur(calc(5 * var(--unit)));
      border-radius: 30%;
      &::after {
        content: "";
        position: absolute;
        left: -100%;
        top: -45%;
        width: 20%;
        height: 30%;
        background: rgb(216, 184, 163);
      }
    }
    .nose {
      background: linear-gradient(-80deg, transparent 40%, var(--dp) 100%);
      transform: rotate(25deg);
      width: 20%;
      height: 45%;
      border-radius: 20% 20% 50% 100% / 20%;
      left: 22%;
      top: 22%;
      filter: var(--blur);

      &::before {
        content: "";
        position: absolute;
        width: 80%;
        border-radius: 30%;
        left: 0%;
        height: 12%;
        background: var(--mb);
        filter: var(--blur);
        bottom: 4%;
        transform: rotate(8deg);
      }

      &::after {
        content: "";
        position: absolute;
        width: 35%;
        height: 95%;
        background: var(--h);
        filter: blur(calc(3 * var(--unit)));
        left: -34%;
        border-radius: 0% 50% 0% 80% / 0% 50% 0% 100%;
      }

      span:nth-child(1) {
        opacity: 0.5;
        width: 80%;
        height: 100%;
        left: -35%;
        transform: rotate(-30deg);
        filter: blur(calc(4 * var(--unit)));
        background: linear-gradient(
          -40deg,
          var(--mb) 40%,
          var(--dp) 60%,
          transparent 61%
        );
        border-radius: 50%;
        box-shadow: calc(1 * var(--unit)) calc(1 * var(--unit))
          calc(2 * var(--unit)) calc(2 * var(--unit)) var(--mb);
      }
      span:nth-child(2) {
        //nostril
        width: 100%;
        height: 20%;
        left: 0%;
        bottom: 8%;
        transform: rotate(-10deg);
        background: var(--dp);
        filter: blur(calc(2 * var(--unit)));
        background: linear-gradient(
          -20deg,
          var(--db) 0%,
          rgb(54, 22, 9) 10%,
          rgb(170, 134, 120) 70%
        );
        border-radius: 90% 80% 50% 10% / 100%;
        box-shadow: inset calc(-1 * var(--unit)) 0 rgb(0, 0, 0),
          inset calc(-3 * var(--unit)) 0 rgb(51, 19, 6);
        &::after {
          content: "";
          position: absolute;
          width: 80%;
          height: 20%;
          background: linear-gradient(
            90deg,
            rgb(29, 10, 2) 0%,
            rgb(51, 19, 6) 20%,
            rgba(68, 25, 8, 0.3) 23%
          );
          box-shadow: calc(-10 * var(--unit)) calc(3 * var(--unit))
              rgba(51, 19, 6, 0.5),
            calc(10 * var(--unit)) calc(20 * var(--unit)) calc(1 * var(--unit))
              calc(15 * var(--unit)) rgba(189, 143, 127, 0.3);
          border-radius: 50%;
          left: 28%;
          bottom: 0%;
        }
      }
      .philtrum {
        width: 85%;
        height: 35%;
        bottom: -20%;
        border-radius: 0% 50% 0% 0%;
        background: linear-gradient(90deg, rgb(141, 103, 91), transparent 90%),
          linear-gradient(0deg, rgb(141, 103, 91) 0%, transparent 60%);
        left: 46%;
        z-index: -3;
        transform: rotate(-15deg);
        filter: blur(calc(2 * var(--unit)));
      }
    }
    .left-eye-hollow {
      width: 18%;
      height: 22%;
      left: 1%;
      top: 15%;
      span:nth-child(1) {
        filter: blur(calc(1.5 * var(--unit)));
        background: linear-gradient(
          95deg,
          var(--h) 0%,
          hsla(20, 33%, 66%, 1) 80%
        );
        border-radius: 20% 100% 30% 30%;
        width: 80%;
        height: 100%;
        left: 30%;
        &::after {
          content: "";
          position: absolute;
          left: 20%;
          top: 93%;
          width: 70%;
          height: 7%;
          filter: blur(calc(4 * var(--unit)));
          background: var(--lb);
          transform: rotate(20deg);
          border-radius: 0% 0% 50% 50%;
        }
      }
      span:nth-child(2) {
        //top eyelid
        background: radial-gradient(
          hsl(21, 28%, 33%) 10%,
          hsl(16, 55%, 84%) 30%,
          hsl(21, 31%, 31%) 90%
        );
        width: 66%;
        height: 50%;
        border-radius: 30% 60% 0% 65%;
        left: 33%;
        top: 30%;
        filter: blur(calc(0.8 * var(--unit)));
        box-shadow: calc(1 * var(--unit)) calc(-2 * var(--unit))
            calc(4 * var(--unit)) calc(1 * var(--unit)) var(--lb),
          calc(-2 * var(--unit)) calc(12 * var(--unit)) calc(3 * var(--unit))
            hsl(19, 25%, 56%);
      }
      span:nth-child(3) {
        background: radial-gradient(
          hsl(19, 17%, 26%) 0%,
          hsl(17, 55%, 83%) 30%,
          hsl(20, 23%, 46%) 100%
        );
        // background: var(--lp);
        width: 70%;
        height: 42%;
        border-radius: 50% 80% 30% 65%;
        box-shadow: calc(1 * var(--unit)) calc(1 * var(--unit))
          calc(4 * var(--unit)) calc(1 * var(--unit)) var(--lb);
        left: 30%;
        top: 45%;
        filter: blur(calc(0.8 * var(--unit)));
        transform: rotate(8deg);
      }
      .left-eye {
        background: linear-gradient(
          90deg,
          rgb(245, 243, 223) 20%,
          rgba(235, 222, 215, 0.3) 80%
        );
        filter: blur(calc(0.5 * var(--unit)));
        box-shadow: inset 0 0 calc(2 * var(--unit)) calc(1 * var(--unit))
            rgb(133, 104, 97),
          calc(-1 * var(--unit)) calc(-1 * var(--unit)) calc(2 * var(--unit)) 0
            var(--db),
          calc(-2 * var(--unit)) calc(-2 * var(--unit)) calc(2 * var(--unit)) 0
            var(--db);
        top: 46%;
        left: 35%;
        width: 62%;
        height: 33%;
        border-radius: 50% 100% 30% 90% / 60% 100% 30% 100%;
        transform: rotate(5deg);
        overflow: hidden;
        span:nth-child(1) {
          filter: blur(calc(0.5 * var(--unit)));
          background: radial-gradient(circle at 22% 25%, white, transparent 17%),
            radial-gradient(
              circle at 55% 45%,
              black,
              #4a4e4c 40%,
              #343a31 60%,
              rgb(31, 31, 31) 70%
            );
          width: 80%;
          height: 105%;
          left: 35%;
          border-radius: 50%;
        }
      }
    }
    .right-eye-hollow {
      z-index: 3;
      width: 30%;
      height: 20%;
      left: 30%;
      top: 25%;
      span:nth-child(1) {
        background: linear-gradient(
          70deg,
          rgb(197, 152, 134) 0%,
          rgb(236, 198, 182) 40%,
          hsl(20, 20%, 45%) 80%
        );
        box-shadow: calc(5 * var(--unit)) calc(-2 * var(--unit))
            calc(3 * var(--unit)) hsla(15, 34%, 23%, 0.2),
          calc(10 * var(--unit)) calc(-2 * var(--unit)) calc(5 * var(--unit))
            hsla(15, 34%, 23%, 0.3);
        filter: blur(calc(1 * var(--unit)));
        width: 62%;
        transform: rotate(22deg);
        height: 45%;
        top: 12%;
        left: 24%;
        border-radius: 50% 60% 30% 30% / 100% 100% 20% 20%;
      }
      //bottom lid
      span:nth-child(2) {
        background: linear-gradient(
          0deg,
          rgb(206, 173, 160) 20%,
          rgb(199, 159, 143) 100%
        );
        filter: var(--blur);
        width: 52%;
        transform: rotate(16deg);
        height: 30%;
        top: 41%;
        left: 21%;
        border-radius: 50% 50% 90% 80% / 100% 100% 90% 100%;
        box-shadow: inset calc(-2 * var(--unit)) 0 calc(1 * var(--unit))
            hsla(15, 34%, 23%, 0.8),
          calc(10 * var(--unit)) 0 calc(5 * var(--unit)) hsla(15, 34%, 23%, 0.8),
          calc(7 * var(--unit)) calc(3 * var(--unit)) calc(6 * var(--unit))
            calc(1 * var(--unit)) var(--lb),
          calc(15 * var(--unit)) calc(6 * var(--unit)) calc(8 * var(--unit)) 0
            var(--lb),
          calc(15 * var(--unit)) calc(-6 * var(--unit)) calc(6 * var(--unit))
            calc(1 * var(--unit)) hsla(15, 34%, 23%, 0.8);
        &::after {
          content: "";
          position: absolute;
          width: 10%;
          height: 15%;
          background: var(--mp);
          border: calc(1 * var(--unit)) solid var(--mb);
          border-radius: 50%;
          left: -3%;
          bottom: 46%;
        }
      }

      .right-eye {
        background: linear-gradient(
          90deg,
          rgb(245, 243, 223) 10%,
          rgba(235, 222, 215, 0.3) 80%
        );
        filter: blur(calc(0.5 * var(--unit)));
        box-shadow: inset 0 calc(1 * var(--unit)) calc(2 * var(--unit))
            calc(1 * var(--unit)) rgba(51, 38, 25, 0.63),
          inset calc(-5 * var(--unit)) 0 calc(5 * var(--unit))
            calc(1 * var(--unit)) rgba(51, 38, 25, 0.822),
          calc(1.5 * var(--unit)) calc(-0.5 * var(--unit)) calc(1 * var(--unit))
            calc(1 * var(--unit)) rgba(75, 49, 37, 0.822);
        top: 30%;
        left: 25%;
        width: 48%;
        height: 35%;
        border-radius: 70% 100% 60% 90% / 80% 100% 80% 80%;
        transform: rotate(12deg);
        overflow: hidden;
        span:nth-child(1) {
          filter: blur(calc(0.5 * var(--unit)));
          background: radial-gradient(circle at 5% 25%, white, transparent 20%),
            radial-gradient(
              circle at 45% 35%,
              black,
              #4a4e4c 50%,
              #343a31 60%,
              rgb(31, 31, 31) 70%
            );
          width: 60%;
          height: 100%;
          left: 38%;
          border-radius: 50%;
        }
      }
    }
  }
}
